<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粒子动画</title>
    <style>
    *{
        margin:0px;
        padding:0px;

    }
    body{
        background-color: black;
    }
    </style>
</head>
<body>
    <script>
        var canvas = document.createElement('canvas')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        document.body.appendChild(canvas)

        // 创建画笔
        var context = canvas.getContext('2d')

        // 定义一个数组用来存放生成的particle对象
        var particles = []


        // 设置定时器,不停的在画布上创建圆
        setInterval(function(){
            // 清除画布
            // clearRect()
            // 第一个参数:x的起始位置
            // 第二个参数:y的起始位置
            // 第三个参数:清除的宽度
            // 第四个参数:清除的高度
            context.clearRect(0,0,canvas.width,canvas.height)
            // Particle()类方法,新建一个类对象
            var particle = new Particle()

            //push()向数组最后添加数据
            //unshift()向数组开头添加数据
            //pop()删除数组中最后一个数据
            // shift()删除数组中的第一个数据
            particles.push(particle)

            for(var i=0;i<particles.length;i++){
               
                // 调用画圆的方法
                particles[i].drawParticle()
                particles[i].updateFrame()
            }

        },30)
        

        function Particle(){
            // 圆心的位置.让其固定在整个画布中间
            this.xPos = canvas.width*0.5
            this.yPos = canvas.height*0.5

            // 定义一个向下的量
            this.yVel = -5 

            // 
            this.xVel = Math.random()*4 -2;

            this.g = 0.1

            this.randomColor = getRandomColor()
            // 粒子自己的画法
            // 初始化
            this.drawParticle = function(){
                // 开启路径
                context.beginPath();
                // 填充样式
                context.fillStyle = this.randomColor 
                context .arc(this.xPos,this.yPos,10,0,Math.PI*2,false)
                // 填充,
                context.fill()
                context.closePath()
            }
            this.updateFrame = function(){
                // 利用变量让小球下落.向下是y轴变大
                this.yVel += this.g
                this.yPos += this.yVel
                this.xPos += this.xVel
            }

        }
        function getRandomColor(){
            return "#"+Math.round(Math.random()*16777215).toString(16);
        }
    
    </script>
</body>
</html>